<template>
  <div class="headSearch">
    <div class="layout-main">
      <div class="top flex-between flex-align-c">
        <div class="left flex">
          <img src="../../../public/img/logo_bg.png" alt="" />
          <Logo
            :showIcon="false"
            height="45px"
            width="160px"
            viewBox="31 10 80.7 13"
          />
        </div>
        <div class="center">
          <!-- <a-auto-complete
            v-model="searchKey"
            :data-source="dataSource"
            style="width: 500px"
            placeholder="请输入品名、规格、仓库、公司名称等关键词"
            @search="onSearch"
            @change="onChange"
          >
            <a-input>
              <c-button slot="suffix" class="searchBtn" type="primary">
                <a-icon type="search" />
              </c-button>
            </a-input>
          </a-auto-complete> -->
          <a-input-search
            v-model="searchKey"
            placeholder="请输入规格、供应商名称等关键词"
            allowClear
            style="width: 400px"
            @search="onSearch"
          />
        </div>
        <div class="right">
          <img src="../../../public/img/qrCode.png" alt="" />
          <ul class="text">
            <li>
              扫码下载
            </li>
            <li>
              聚点商城APP
            </li>
            <li>
              手机下单更快哦
            </li>
          </ul>
        </div>
      </div>
      <div class="bottom flex">
        <c-category
          v-model="category"
          :getPopupContainer="
            trigger => {
              return trigger.parentNode;
            }
          "
          @change="onChange"
          @visibleChange="visibleChange"
          popupClassName="allCategoryPopup"
        >
          <c-button type="primary" ref="allCategory" class="allCategory">
            <div class="tc"><c-icon type="fenlei" /> 全部分类</div>
          </c-button>
        </c-category>
        <TopMenu />
      </div>
    </div>
  </div>
</template>

<script>
import Logo from "@/components/logo";
import TopMenu from "@/components/topMenu";
import { debounce } from "@/util/common";
import { mapActions } from "vuex";

export default {
  components: {
    Logo,
    TopMenu
  },
  data() {
    return {
      category: undefined,
      searchKey: "",
      dataSource: [
        {
          value: 1,
          text: "aaaa"
        },
        {
          value: 2,
          text: "bb"
        }
      ],
      allCategoryVisible: false
    };
  },
  methods: {
    ...mapActions(["updateSearchKey", "updateCategory"]),
    onSearch() {
      this.updateSearchKey(this.searchKey);
    },
    onChange(val) {
      // 选择后重置
      this.category = undefined;
      this.updateCategory(val);
      this.$router.push({ name: "spotmall", params: { category: val } });
    },
    // 展示联级菜单
    showCascaderMenus() {
      this.$refs.allCategory.$el.click();
    },
    visibleChange(val) {
      this.allCategoryVisible = val;
      if (val) {
        window.document.body.onmouseover = debounce(event => {
          let a;
          let b;
          if (document.getElementsByClassName("allCategoryPopup")[0]) {
            a = document
              .getElementsByClassName("allCategoryPopup")[0]
              .contains(event.target);
          }
          if (this.$refs.allCategory) {
            b = this.$refs.allCategory.$el.contains(event.target);
          }
          if (!a && !b) {
            if (this.$refs.allCategory) {
              this.$refs.allCategory.$el.click();
            }
          }
        });
      } else {
        window.document.body.onmouseover = null;
      }
    }
  },
  mounted() {
    this.$refs.allCategory.$el.onmouseenter = () => {
      if (!this.allCategoryVisible) {
        this.showCascaderMenus();
      }
    };
  }
};
</script>

<style lang="scss" scoped>
.headSearch {
  padding-top: 20px;
  background-color: #fff;
  .searchBtn {
    margin-right: -12px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .top {
    .left {
      img {
        width: 45px;
      }
    }
    .right {
      .text {
        height: 100px;
        padding-left: 10px;
        float: right;
        li {
          line-height: 33.3px;
        }
        li:first-child {
          font-size: 20px;
          font-weight: bold;
        }
      }
    }
  }
  .bottom {
    padding-top: 10px;
    .allCategory {
      width: 200px;
      height: 40px;
      line-height: 40px;
      border-radius: 0;
      margin-right: 30px;
    }
    .ant-btn-primary:focus {
    }
    ::v-deep .ant-cascader-menus {
      border-radius: 0;
      background-color: rgba(0, 0, 0, 0.8);
    }
    ::v-deep .ant-cascader-menus .ant-cascader-menu {
      min-width: 200px;
      height: auto;
      border-radius: 0;
    }
    ::v-deep .ant-cascader-menu:first-child {
      color: #fff;
      overflow: hidden;
      li {
        padding-left: 60px;
        line-height: 66px;
        span {
          color: #fff;
        }
      }
    }
    ::v-deep .ant-cascader-menu:nth-child(2) {
      height: 464px;
      background-color: #fff;
    }
    ::v-deep .ant-cascader-menu:nth-child(1) {
      .ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled),
      .ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled):hover {
        background-color: rgba(0, 0, 0, 0.8);
      }
      .ant-cascader-menu-item:hover {
        background: rgba(0, 0, 0, 0.8);
      }
    }
  }
}
</style>
